<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>cssTwo</title>
</head>
<style>


  /*同级比较时，谁在下面结果就是谁*/
   .one div{
     color: red;
   }
   div.two{
     color: green;
   }


   /*如果同样是继承，谁的标签最靠进文字结果就是谁*/
   div.three{
      color: red;
   }
   div p{
     color: green;
   }

   #textId{
     font-size: 20px;
     width: 120px;
     height: 100px;
     background-color: pink;
     /*border:边框*/
/*     border: red 5px solid; !*solid:实线 *!
     border: red 5px dashed;!*dashed:虚线 *!
     !*border: red 5px dotted;*!!*dotted:点线 *!*/
     border-top: red 5px solid;
     border-right: red 5px solid;
     border-left: red 5px solid;
    /* border-bottom: red 5px solid;*/
     border-width: 1px; /*边框粗细*/
     border-style: none; /*边框类型*/
     border-style: solid; /*边框类型*/
     border-color: green; /*边框颜色*/
   }
   .level{
    /* padding-left: 50px; !*左内边距50px*!*/
     height: 40px;
     background-color: pink;
     border-top: orange 2px solid;
     border-bottom: red 1px solid;
     background-image: url(soccer.jpg);
   }

   a{
     float: left;
     width: 100px;
     text-decoration: none;
     display: inline-block;
     color: black;
     text-align: center;
     line-height: 40px;
     /*margin: 10px;*/
     padding: 0 10px; /*可以在小盒子里面放很多的内容*/

   }
   #one1{
     padding-left: 100px; /*左内边距50px*/

   }

   a:hover{
     color: red;
   }

.ones{
  background-color: orange;
}
.one3{
  width: 100px;
  height: 100px;
  background-color: green;
  border: 10px red solid;
  padding: 20px;
  box-sizing: border-box; /*会自动的减除盒子的边框(border)大小和内边距(padding)大小就会
  从100+10*2+20*2=180 180*180变回100*100盒子*/
}

</style>
<body>
<div>

</div>
<!--css的优先级:!important>行内样式>id标签选择器>类标签选择器>普通标签选择器>通配符标签选择器>继承-->



<div class="two">
  <div class="one" id="One">hello</div><!--绿色-->
</div>

<div>
  <diV class="three" id="tid">
    <p class="i">
      <span>hi</span> <!--绿色-->
    </p>
  </diV>
</div>


<div class="level">
  <a href="#" id="one1">新浪导航1</a>
  <a href="#" id="two1">新浪导航2</a>
  <a href="#" id="three1" >新浪导航123</a>

</div>


<!--盒子组成模型:文本内容区域(content), 内边距区域(padding),边框区域(border) ,外边距区域(margin)-->


<!--边框border: 像素 类型  颜色-->
<!--<div id="textId">文本内容区域</div>-->

<div class="ones">
  <div class="one3">文字1</div>
  <div class="one4">文字2</div>
  <div class="one5">文字3</div>
</div>
<!--自动内减:box-sizing: border-box;-->


<script>

</script>
</body>
</html>
